<template>
  <TForm v-model="formData" :columns="formColumns" @onFinish="onSubmit" @onReset="onReset" :formProps="formProps"></TForm>
</template>

<script lang="ts" setup>
import { TForm, TFormColumns, TFormProp } from '@twa/components'
import { ref } from 'vue'

const formData:any = ref({})

const formProps = ref<Partial<TFormProp>>({
  labelWidth: '128px',
  inline: true,
  inlineColumnNumber: 2,
})
function onReset(){
  console.log('onReset', formData.value)
}
function onSubmit(){
  console.log('onSubmit', formData.value)
}
const formColumns = ref<TFormColumns[]>([
  { 
    label: '输入框', 
    prop: 'test1',
    valueType: 'input',
    defaultValue: '默认值'
  },
  { 
    label: '输入文本域', 
    prop: 'test1.1',
    valueType: 'input',
    fieldProps: {
      type: "textarea"
    },
    formItemProps: {
      style: {
        width: '100%'
      }
    }
  },
  { 
    label: '数字输入框', 
    prop: 'test2',
    valueType: 'inputNumber'
  },
  { 
    label: '切换按钮', 
    prop: 'test3',
    valueType: 'switch'
  },
  { 
    label: '下拉框', 
    prop: 'test4',
    valueType: 'select',
    valueEnum: [
      { label: '选项1', value: '1' },
      { label: '选项2', value: '2' },
      { label: '选项3', value: '3' },
    ]
  },
])
</script>